import { useEffect, useRef } from "react"
import * as GC from "@grapecity/spread-sheets"
import { IO } from "@grapecity/spread-excelio"
import axios from 'axios'

const App = () => {
  const container = useRef()

  useEffect(() => {
    const getFile = async () => {
      // const response = await axios.get("http://localhost:9602/static/output.xlsx", {
      // const response = await axios.get("http://localhost:9602/persons/batchImportTemplate", {
      const response = await axios.get("https://jtgj-rest.ljkjkf.com/api/personEntryLeaves/template/0545c883-6693-4e05-a90f-1baf24a8a190", {
        headers: {
          Authorization: 'Bearer eyJhbGciOiJSUzI1NiIsImtpZCI6IjI5NUMxRjg3NzRFODM0NDQ0RTYyMjE2MkQyNTVBOTVGIiwidHlwIjoiYXQrand0In0.eyJuYmYiOjE3MDE3NDY1NTgsImV4cCI6MTcwMTgxODU1OCwiaXNzIjoiaHR0cDovLzQ3LjkzLjE4MC42Mzo5NjAxIiwiY2xpZW50X2lkIjoianRnaiIsInN1YiI6InRvbnpvYyIsImF1dGhfdGltZSI6MTcwMTc0NjU1OCwiaWRwIjoibG9jYWwiLCJwZXJzb25VdWlkIjoiIiwicGVyc29uTmFtZSI6IiIsInVzZXJVdWlkIjoiMWU5OWUxMTYtNmVjMC00MjVjLTg3YjQtNjRkZDJjZTQ1OGUyIiwidXNlck5hbWUiOiJ0b256b2MiLCJoYXNWYWxpZFBhc3N3b3JkIjoieWVzIiwid2VjaGF0Ijoibm8iLCJqdGkiOiIyRjBCMTc4NzIzNTdDRkIwNTc2QTMyQjkzM0U4NjhEMSIsImlhdCI6MTcwMTc0NjU1OCwic2NvcGUiOlsiYXBpMSIsIm9wZW5pZCIsIm9mZmxpbmVfYWNjZXNzIl0sImFtciI6WyJwYXNzd29yZCJdfQ.PcN8xNf0jC7-8exJLcTSPgkuby1KA_A4c5KVq2OvJr0fe-CqhprWUbTznx03V5WkcjTYeK1nuo1jB6dTFsHyWAG_DT7wih8_qvo5qOWk4ZRUey5FCTepYEGj6OfVCmHazvIgaM1jMOTbSLWN6Yk2m71Ijs3xHyWCu1oK_fmq0ujRPR1kcV4uMCPa6UGoLOBTGCRBwipmj7mVEgsE75ymNUloqDgM0yspOz7cHlaeOhUPlDPCzlydZZI0e0RN83Bc1JvTBJDjFF8Y3396qJpYLLb4P0IrW5u3kYb8s6gL05aGhuu700a8gynsWdG79PF-YJZZOevaeyzEox3cJdR6GA',
        },
        responseType: 'blob'
      })
      const workbook = new GC.Spread.Sheets.Workbook(container.current)
      new IO().open(response.data, json => {
        console.log(json)
        workbook.fromJSON(json)
      })
    }
    getFile()
  }, [])

  return (
    <>
      <div ref={container} style={{ width: '900px', height: '900px' }}></div>
    </>
  )
}

export default App;
